<template>
  <div>
    <div>
      <!-- 添加标签 -->
      <el-button type="text" @click="dialogFormVisible = true">添加单位</el-button>
      <el-dialog title="实有单位" :visible.sync="dialogFormVisible">
        <el-form :model="unit">
          <el-form-item label="单位名称" :label-width="formLabelWidth">
            <el-input v-model="unit.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="单位地址" :label-width="formLabelWidth">
            <el-input v-model="unit.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="单位联系人" :label-width="formLabelWidth">
            <el-input v-model="unit.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系人证件号" :label-width="formLabelWidth">
            <el-input v-model="unit.uidIdCard" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话号" :label-width="formLabelWidth">
            <el-input v-model="unit.uidTel" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="单位类型" :label-width="formLabelWidth">
            <el-select v-model="unit.typeId" placeholder="请选择单位类型">
              <el-option
                v-for="item in options"
                :key="item.typeId"
                :label="item.name"
                :value="item.typeId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所在小区" :label-width="formLabelWidth">
            <el-select v-model="unit.residenceId" placeholder="请选择所在小区">
              <el-option
                v-for="item in option"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="照片">
            <el-upload
              action="/dev-api/community-management/unit/upload"
              :on-success="handleAvatarSuccess"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="getAdd">确 定</el-button>
        </div>
      </el-dialog>
      <form action="/dev-api/community-management/unit/import" method="post" enctype="multipart/form-data">
        <input type="file" name="file" id="file">
        <input type="submit" value="导入">
        <el-button @click="derive" type="primary">导出</el-button>
        <el-button @click="delUnit"><i class="el-icon-delete"></i>批量删除</el-button>
        <el-button @click="download"><i class="el-icon-delete"></i>模板下载</el-button>
      </form>
    </div>
    <el-table
      :data="unitList" style="width: 100%"
      @selection-change="handleSelectionChange">
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="ID">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="单位名称">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="单位地址">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.address }}</span>
        </template>
      </el-table-column>
          <el-table-column prop="img" label="照片" show-overflow-tooltip>
            <template v-slot="scope">
              <el-image :src="scope.row.image.split(',')[0]"></el-image>
            </template>
          </el-table-column>
      <el-table-column label="单位类别名称">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.typeName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所在小区名称">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.residenceName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="联系人">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="电话号码">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.uidTel }}</span>
        </template>
      </el-table-column>
      <el-table-column label="证件号码">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.uidIdCard }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!--    分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="sqUnitReq.pageNum"
      :page-sizes="[5, 10, 20, 100]"
      :page-size="sqUnitReq.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>


<script>
import { getSqUnitList } from '@/api/monitor/unit'
import {
  getAddSqUnit,
  getDelUnit,
  getDownload,
  getExport,
  getNameList,
  getResidenceList
} from "../../../api/monitor/unit";
import {MessageBox} from "element-ui";
import {exportExcel} from "../../../api/excel";
export default {
  data(){
    return{
      unitList:[],
      multipleSelection:[],
      unitImgs:[],
      sqUnitReq:{
        likeStr: '',
        residenceId:null,
        pageNum:1,
        pageSize:3,
      },
      total:0,
      options:[],
      option:[],
      unit:{
        name:'',
        address:'',
        username:'',
        uidIdCard:'',
        uidTel:'',
        typeId:'',
        id:'',
        image:'',
      },
      dialogFormVisible: false,
      formLabelWidth: '120px',
    }
  },
  methods:{
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.sqUnitReq.pageSize=val
      this.getUnitList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.sqUnitReq.pageNum=val
      this.getUnitList()
    },
    // 模板下载
    download() {
      getDownload().then(response=>{
      })
    },
    //导出
    derive() {
      let  ids=[]
      this.multipleSelection.forEach(unitList=>{
        ids.push(unitList.id)
      })
      getExport(this.ids).then(response => {
        exportExcel("/dev-api/community-management/unit/export","实有单位列表.xlsx")
        this.$message.success('导出成功')
      })
    },
    getAdd() {
      getAddSqUnit(this.unit).then(response=>{
        this.$message.success('添加成功');
        this.dialogFormVisible = false
        this.getUnitList()
      })
    },
    // 添加照片
    handleAvatarSuccess(res, file) {
      this.unitImgs.push(res)
      this.unit.image = this.unitImgs.join(',')
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 单位类型下拉框
    getNameLists() {
      getNameList().then(response => {
        this.options = response.data;
      })
    },
    // 小区下拉框
    getResidenceLists() {
      getResidenceList().then(response => {
        this.option = response.data;
      })
    },

    getUnitList(){
      getSqUnitList(this.sqUnitReq).then(response=>{
        this.unitList = response.data.list
        this.total=response.data.total
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 删除标签
    delUnit() {
      if (this.multipleSelection.length===0){
        this.$message.warning("至少选则一个")
      }
      MessageBox.confirm('是否要删除', 'Confirm logout', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let  ids=[]
        this.multipleSelection.forEach(unitList=>{
          ids.push(unitList.id)
        })
        getDelUnit(ids).then(res=>{
          if (ids.length!==0){
            this.$message.success("删除成功")
            this.getUnitList()
          }
        })
      })
    },
  },
  created() {
    this.getUnitList();
    this.getNameLists();
    this.getResidenceLists();
  }
}
</script>

<style scoped lang="scss">

</style>
